<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试</title>
    <link rel="stylesheet" href="./dist/style/style.css">
</head>
<body>
    <h4>postcss使用技巧</h4>
    <a href="https://postcss.org/">https://postcss.org/</a>
    <article>postcsss是一款支持css3新特性的编译插件,使用该插件后可以将源码中使用的css新特性编译为绝大多数浏览器兼容的css样式</article> 
    <br>
    <code>
        pnpm i -D postcss-cli 
    </code>
    <br>
    <code>
        pnpm i -D postcss
    </code>
    <br>
    添加指令: <br>
    <code>
        "watch": "postcss src/style/style.css -o dist/style/style.css -w"
    </code>
<!-- --------------------------------------------------------------------------------------------- -->
    <hr>
    <b>1、自动为css添加不同浏览器的前缀</b> 
    <br>
    <code>
        pnpm i -D autoprefixer 
    </code>
    <br>
    开启postcss.config.js对应的配置: <br>

    <div class="postcss-prefix"></div>
<!-- --------------------------------------------------------------------------------------------- -->
<hr>
<b>2、使用自定义选择器</b> 
<br>
<code>
    pnpm i -D postcss-preset-env
</code>
<br>
开启postcss.config.js对应的配置: <br>

<div class="postcss-cusclass">
    <h1>自定义选择器</h1>
</div>


<!-- --------------------------------------------------------------------------------------------- -->
<hr>
<b>3、使用图片控制元素尺寸</b> 
<br>
<code>
    pnpm i -S postcss-import
</code>
<br>
<code>
    pnpm i -D  postcss-assets
</code>
<br>
开启postcss.config.js对应的配置: <br>
<div class="postcss-img"></div>
</body>
</html>